@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@config '../../tailwind.config.ts'

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  /* background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb)); */
    background-color: #fff;
}

/* 进本样式 */
@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

/* 添加自定义工具 */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .content-auto {
    content-visibility: auto;
  }
}

/* 自定义CSS */
@layer components {
  .batype-flex {
    display: flex;
    justify-content: space-between;
  }
  .header-area {
    height: theme(space.12);
    /* line-height: theme(space.12); */
    @apply bg-black text-white pl-4 pr-4 leading-[3rem];
  }
  .content-area {
    height: calc(100vh - theme(space.12));
    @apply bg-gray-50 p-4;
  }
  .select2-search {
    @apply border border-gray-100 rounded;
  }

  .button {
    @apply pr-4 pl-4 pt-1.5 pb-1.5 rounded-md ;
    
  }

  .primry {
    @apply bg-[#1da1f2] text-white;
    @apply transition duration-150 ease-in-out;
    @apply hover:outline-none active:ring hover:bg-blue-400;
  }

  .default {
   @apply border-spacing-1.5 transform border border-solid border-gray-300 bg-white text-black;
   @apply transition duration-150 ease-in-out;
   @apply hover:text-blue-500 hover:border-blue-500 hover:outline-none active:ring;
  }
}